<template>
	<span>
		<van-field :model-value="result" is-link readonly label="选择器" placeholder="点击选择城市"
			@click="showPicker = true" />
		<van-popup v-model:show="showPicker" position="bottom">
			<van-picker :columns="props.columns" @confirm="onConfirm" @cancel="onCancle" />
		</van-popup>
	</span>
</template>


<script setup>

const props = defineProps({
    data: {
        type: String,
        default: function () {
            return ""
        }
    },
	columns: {
		type: Array,
		default: function () {
			return []
		}
	},
});


const data = reactive({ });


const result = ref('');
const showPicker = ref(false);

const emit = defineEmits(["change", 'update:data']);

const onConfirm = ({ selectedOptions }) => {
	showPicker.value = false;
	emit("change", selectedOptions[0]?.value); // 事件触发
	emit('update:data', selectedOptions[0]?.value); // 双向绑定数据改变,update必须结合v-model
};

const onCancle = () => {
	console.log(11111,222222222222222)
	showPicker.value = false;
};

// props单个监听
watch(() => props.data, (newValue, oldValue) => {
	// console.log(newValue);
	// result.value =  newValue;  props.columns
	var obj = _.findWhere(props.columns, { value: newValue });
	result.value = obj?.text;
	// console.log(11111, obj)
},
	{ deep: true, immediate: true }
);

</script>
<style lang="less" scoped></style>
